<template>
  <div stype="margin: 10px 0"></div>

  <div style="padding: 10px">
    <el-row :gutter="2">
      <el-col >
        <el-card>
          <div id="myChart1" :style="{ width: '600px', height: '600px' }"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div stype="margin: 10px 0"></div>

  <div style="padding: 10px">
    <el-row :gutter="2">
      <el-col >
        <el-card>
          <div id="myChart2" :style="{ width: '600px', height: '600px' }"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
// import * as echarts from 'echarts';

// var chartDom = document.getElementById(' main');
// var myChart = echarts.init(chartDom);
// var option;

export default {
  name: "Map",
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(
        document.getElementById("myChart1")
      );
      let myChart2 = this.$root.echarts.init(
        document.getElementById("myChart2")
      );
      let option1 = {
        title: {
          text: "部门人数比例统计图",
          subtext: "",
          left: "left",
        },
        tooltip: {
          trigger: "item",
    
        },
        legend: {
          orient: "vertical",
          trigger: "item",
          left: "right",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          left:"70%",
        },
        series: [
          {
            name: "用户比例",
            type: "pie",
            radius: [50, 150],
            center: ["50%", "60%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [],
            
          },
        ],
      };
      request.get("/user/count").then((res) => {
        if (res.code === "0") {
          res.data.forEach((item) => {
            option1.series[0].data.push({
              name: item.address,
              value: item.count,
            });
          });
          // 绘制图表
          myChart.setOption(option1);
        }
      });
      //图表2
      let option2 = {
      title: {
                text: "各部门对应年级人数分布统计图",
                subtext: "",
                left: "left",
              },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    top:'5%',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['助学部', '外联部', '学习部', '实践部', '无部门', '组织部', '自律部']
  },
  toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          left:"80%",
          top:"5%",

        },
  series: [
    {
      name: '未知',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      name: '大一',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      name: '大二',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      name: '大三',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      name: '大四',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
  ]
      };
      request.get("/user/countAges").then((res) => {
        if (res.code === "0") {
          res.data.forEach((item) => {
            // console.log(option2.series[0].data);
            // console.log(item.age);
            // console.log(item.index)
            // console.log(item.wlcount);
            // option2.series.forEach((e) => {
            //   e.data.push(item.zxcount);
            //   e.data.push(item.wlcount);
            //   e.data.push(item.xxcount);
            //   e.data.push(item.sjcount);
            //   e.data.push(item.nocount);
            //   e.data.push(item.zzcount);
            //   e.data.push(item.zlcount);
            //   console.log(item.zlcount);
            // });
            if(item.age == null) {
              option2.series[0].data.push(item.zxcount);
              option2.series[0].data.push(item.wlcount);
              option2.series[0].data.push(item.xxcount);
              option2.series[0].data.push(item.sjcount);
              option2.series[0].data.push(item.nocount);
              option2.series[0].data.push(item.zzcount);
              option2.series[0].data.push(item.zlcount);
            }
            else if(item.age == 1) {
              option2.series[1].data.push(item.zxcount);
              option2.series[1].data.push(item.wlcount);
              option2.series[1].data.push(item.xxcount);
              option2.series[1].data.push(item.sjcount);
              option2.series[1].data.push(item.nocount);
              option2.series[1].data.push(item.zzcount);
              option2.series[1].data.push(item.zlcount);
            }
            else if(item.age == 2) {
              option2.series[2].data.push(item.zxcount);
              option2.series[2].data.push(item.wlcount);
              option2.series[2].data.push(item.xxcount);
              option2.series[2].data.push(item.sjcount);
              option2.series[2].data.push(item.nocount);
              option2.series[2].data.push(item.zzcount);
              option2.series[2].data.push(item.zlcount);
            }
            else if(item.age == 3) {
              option2.series[3].data.push(item.zxcount);
              option2.series[3].data.push(item.wlcount);
              option2.series[3].data.push(item.xxcount);
              option2.series[3].data.push(item.sjcount);
              option2.series[3].data.push(item.nocount);
              option2.series[3].data.push(item.zzcount);
              option2.series[3].data.push(item.zlcount);
            }
            else if(item.age == 4) {
              option2.series[4].data.push(item.zxcount);
              option2.series[4].data.push(item.wlcount);
              option2.series[4].data.push(item.xxcount);
              option2.series[4].data.push(item.sjcount);
              option2.series[4].data.push(item.nocount);
              option2.series[4].data.push(item.zzcount);
              option2.series[4].data.push(item.zlcount);
            }

          });
          // 绘制图表
          myChart2.setOption(option2);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>